<template>
  <view class="expect_container app_container_page">
    <view class="expectContent" v-for="expect in expectList" :key="expect.id">
      <view class="expectContentPic" :class="expect.class"></view>
      <view class="expectContentTitle">{{ expect.content }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      expectList: [
        { id: 1, content: '改善器材', class: 'improveEquipment' },
        { id: 2, content: '优惠活动', class: 'preferentialActivities' },
        { id: 3, content: '推荐食谱', class: 'recommendedRecipes' },
        { id: 4, content: '健康档案', class: 'healthRecords' }
      ]
    }
  }
}
</script>

<style lang="scss">
.expect_container {
  padding: 30rpx 30rpx 0 30rpx;
  .expectContent {
    margin-top: 30rpx;
    width: 690rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: 0px 10rpx 40rpx 0px rgba(0, 0, 0, 0.1);
    border-radius: 40rpx;
    display: flex;
    overflow: hidden;
    .expectContentPic {
      width: 240rpx;
      height: 180rpx;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .improveEquipment {
      background: url('#{$BASEURL}/improveEquipmentPic.png') no-repeat;
      background-size: cover;
    }
    .preferentialActivities {
      background: url('#{$BASEURL}/preferentialActivitiesPic.png') no-repeat;
      background-size: cover;
    }
    .recommendedRecipes {
      background: url('#{$BASEURL}/recommendedRecipesPic.png') no-repeat;
      background-size: cover;
    }
    .healthRecords {
      background: url('#{$BASEURL}/healthRecordsPic.png') no-repeat;
      background-size: cover;
    }
    .expectContentTitle {
      width: 450rpx;
      font-size: 40rpx;
      height: 180rpx;
      line-height: 180rpx;
      margin-left: 107rpx;
    }
  }
}
</style>
